<template>
    <div class="container scopClass">
        <el-tabs v-model="activeName" @tab-click="handleClick">
<!--            <el-tab-pane label="地块" name="地块">-->
<!--                <el-row style="margin:20px 0;">-->
<!--                    <el-col :span="7">-->
<!--                        <el-input style="border-radius: 0 5px 5px 0;width:300px;" placeholder="请输入关键词"  v-model="searchName1">-->
<!--                            <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--                            <el-button slot="append" @click="handleSearch1">搜索</el-button>-->
<!--                        </el-input>-->
<!--                    </el-col>-->
<!--                  -->
<!--                    <el-button type="primary"  style="float:right; margin-right: 10px" @click="addplot">新增地块</el-button>-->
<!--                </el-row>-->
<!--                <el-table-->
<!--                    :data="tableData1"-->
<!--                    border-->
<!--                    ref="multipleTable"-->
<!--                    header-cell-class-name="table-header"-->
<!--                >-->
<!--                    <el-table-column prop="name" sortable label="地块名称"></el-table-column>-->
<!--                    <el-table-column prop="area" sortable label="面积">-->
<!--						<template slot-scope="scope">-->
<!--							<span>{{scope.row.area}}</span>-->
<!--							<span style="margin-left:4px;">亩</span>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--                    <el-table-column prop="peasantName" sortable label="农户"></el-table-column>-->
<!--                    <el-table-column prop="principalName" sortable label="管理员"></el-table-column>-->
<!--					<el-table-column prop="stateful" sortable label="状态"></el-table-column>-->
<!--					<el-table-column prop="pid" sortable label="所属基地"></el-table-column>-->
<!--                    <el-table-column label="操作" width="200" align="center">-->
<!--                        <template slot-scope="scope">-->
<!--                         -->
<!--                            >查看</el-button> &ndash;&gt;-->
<!--                            <el-button-->
<!--                                -->
<!--                                type="text"-->
<!--                                @click="handleYard(scope.$index, scope.row)"-->
<!--                            >地块码</el-button>-->
<!--                          -->
<!--                          -->
<!--                        </template>-->
<!--                    </el-table-column>-->
<!--                </el-table>-->
<!--                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize1" @current-change="handleCurrentChange1" :total="total1" :current-page.sync="currentPage1" style="margin-top:20px"></el-pagination>-->
<!--            </el-tab-pane>-->
            <el-tab-pane label="养殖区域" name="养殖区域">
                <el-row style="margin:20px 0;">
                    <el-col :span="7">
                        <el-input style="border-radius: 0 5px 5px 0;width:300px;" placeholder="请输入关键词"  v-model="searchName2">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <el-button slot="append" @click="handleSearch2">搜索</el-button>
                        </el-input>
                    </el-col>
                   
                    <el-button type="primary" v-if="added" style="float:right; margin-right: 10px" @click="addwarehouse">新增仓库</el-button>
                </el-row>
                <el-table
                    :data="tableData2"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="养殖区域名称" sortable label="养殖区域"></el-table-column>
                    <el-table-column prop="area" sortable label="面积">
						<template slot-scope="scope">
							<span>{{scope.row.area}}</span>
							<span style="margin-left:4px;">亩</span>
						</template>
					</el-table-column>
                    <el-table-column prop="materialCode" sortable label="所属基地"></el-table-column>
                  
                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                @click="handleEdit(scope.$index, scope.row)"
                            >编辑</el-button>
                            <el-button
                                type="text"
                                @click="handleView(scope.$index, scope.row)"
                            >养殖区域码</el-button>
                            <!-- <el-button
                                type="text"
                                style="color:red;"
                                @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize2" @current-change="handleCurrentChange2" :total="total2" :current-page.sync="currentPage2" style="margin-top:20px"></el-pagination>
            </el-tab-pane>
          
        </el-tabs>
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="二维码边长（cm）" width="150"></el-table-column>
                <el-table-column property="name" label="建议扫描距离（米）" width="200"></el-table-column>
                <el-table-column property="address" label="下载链接"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import  {base_findByList,base_delete} from "@/request/api"
    export default {
        data() {
            return {
                gridData:[],
                dialogTableVisible:false,
                activeName: '养殖区域',
                searchName1: '',
                searchName2: '',
                searchName3: '',
                tableData1: [],
				tableData2: [],
				tableData3: [],
                total1: 0,
                currentPage1:1,
                pagesize1:10,
                total2: 0,
                currentPage2:1,
                pagesize2:10,
                total3: 0,
                currentPage3:1,
                pagesize3:10,
              
                listUrl: '',
                action: '',
                added:true,
            };
        },
        created(){
         
        },
        mounted(){
           this.init1()
		   this.init2()
		 
        },
        destroyed: function () {
           
        },
        methods: {
			architecture(){
				this.$router.push({
					path:'/digitalMap',
					query:{type:4}
				})	
			},
			addwarehouse(){
				this.$router.push({
					path:'/digitalMap',
					query:{type:3}
				})	
			},
			addplot(){
				this.$router.push({
					path:'/digitalMap',
					query:{type:2}
				})
			},
            handleYard(){
                this.dialogTableVisible = true
            },
            init1(){
                let data = {
                    page:this.currentPage1,
                    name: this.searchName1,
                    type:'2',
                }
                base_findByList(data).then((res)=>{
                    this.tableData1 = res.rows
                    this.total1 = res.total
                    var _this = this
                    for (let i = 0; i < this.tableData1.length; i++) {
                        if(this.tableData1[i].state == 0){
                            _this.tableData1[i].stateful = "休耕" 
                        }else{
                            _this.tableData1[i].stateful = "种植中"
                        }
                        
                    }
                    
                })
            },
			init2(){
				let data = {
				    page:this.currentPage1,
                    name: this.searchName2,
                    type:'2',
				}
				base_findByList(data).then((res)=>{
				    this.tableData2 = res.rows
				    this.total2 = res.total
				    var _this = this
				    // for (let i = 0; i < this.tableData.length; i++) {
				    //     if(this.tableData[i].state == 0){
				    //         _this.tableData[i].stateful = "休耕" 
				    //     }else{
				    //         _this.tableData[i].stateful = "种植中"
				    //     }
				        
				    // }
				    
				})
			},
			
           
            // tabs
            handleClick(tab, event) {
         
            },
            //养殖区域编辑
            handleEdit(index,row){
                console.log(index)
                console.log(row)
                    this.$router.push({
                    path: '/yzdigtalMap',
                    query: { id: row.id, type: '2', isshow: true }
                });
            },
            // 查看
            handleView(index,row){
                
            },
            // 删除
            handleDelete(index,row){
                base_delete(row.id).then((res)=>{
                    this.$notify({
                        title: '提示',
                        message: '删除成功',
                        type: 'success'
                    });
                })
            },
           
            // 列表搜索
            handleSearch1() {
                this.currentPage1 = 1
                this.init1()
            },
            handleSearch2() {
                this.currentPage2 = 1
                this.init2()
            },
       
            
          
          
            // 分页事件
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init1()
            },
            handleCurrentChange2(val){
                this.currentPage2 = val
                this.init2()
            },
            handleCurrentChange3(val){
                this.currentPage3 = val
                this.init3()
            },
          
            uploadonchange(file) {
                
               
            }
        }
    }
</script>

<style lang="less" scoped>
// 深度作用器
/deep/.upload-daoru{
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}
.el-col{
    margin-bottom: 0;
}
/* .scopClass .el-table{ margin-top: 20px;} */
 .el-pagination{
    text-align: center;
}
/* 
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
} */
</style>